<template>
  <button
    class="t-switch"
    :disabled="prop.disabled"
    :class="[{ 't-switch-checked': prop.value }, `t-switch-size-${prop.size}`]"
    :style="{ background: prop.value ? prop.openColor : prop.closeColor }"
    @click="toggle"
  >
    <span class="circle"></span>
  </button>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import PropData from "@/views/props/Switch.prop";
const prop = defineProps(PropData);
const emit = defineEmits(["update:value"]);

const toggle = () => {
  emit("update:value", !prop.value);
};
</script>
<style lang="scss" scoped>
$switch-size-default-width: 60px;
$switch-size-default-height: 30px;
$gap-default: 3px;
$span-wh-default: $switch-size-default-height - $gap-default * 2;

$switch-size-large-width: 72px;
$switch-size-large-height: 40px;
$gap-large: 4px;
$span-wh-large: $switch-size-large-height - $gap-large * 2;

$switch-size-small-width: 40px;
$switch-size-small-height: 24px;
$gap-small: 2px;
$span-wh-small: $switch-size-small-height - $gap-small * 2;

.t-switch {
  display: inline-block;
  border: none;
  position: relative;
  border: none;
  transition: background 0.25s ease-in-out;
  &:active .circle {
    transform: scaleX(120%);
  }
  &:focus {
    outline: none;
  }

  > .circle {
    z-index: 1;
    position: absolute;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
  }
  &.t-switch-size-default {
    width: $switch-size-default-width;
    height: $switch-size-default-height;
    border-radius: calc(#{$switch-size-default-height} / 2);
    box-shadow: inset 0 0 (2 * $gap-default) #40424422;
    > .circle {
      left: $gap-default;
      top: $gap-default;
      width: $span-wh-default;
      height: $span-wh-default;
      border-radius: calc(#{$span-wh-default} / 2);
      box-shadow: 0 0 (2 * $gap-default) #40424422;
    }
    &.t-switch-checked > .circle {
      left: calc(100% - #{$span-wh-default + $gap-default});
    }
  }

  &.t-switch-size-large {
    width: $switch-size-large-width;
    height: $switch-size-large-height;
    border-radius: calc(#{$switch-size-large-height} / 2);
    box-shadow: inset 0 0 (2 * $gap-large) #40424422;
    > .circle {
      left: $gap-large;
      top: $gap-large;
      width: $span-wh-large;
      height: $span-wh-large;
      border-radius: calc(#{$span-wh-large} / 2);
      box-shadow: 0 0 (2 * $gap-large) #40424422;
    }
    &.t-switch-checked > .circle {
      left: calc(100% - #{$span-wh-large + $gap-large});
    }
  }
  &.t-switch-size-small {
    width: $switch-size-small-width;
    height: $switch-size-small-height;
    border-radius: calc(#{$switch-size-small-height} / 2);
    box-shadow: inset 0 0 (2 * $gap-small) #40424422;
    > .circle {
      left: $gap-small;
      top: $gap-small;
      width: $span-wh-small;
      height: $span-wh-small;
      border-radius: calc(#{$span-wh-small} / 2);
      box-shadow: 0 0 (2 * $gap-small) #40424422;
    }
    &.t-switch-checked > .circle {
      left: calc(100% - #{$span-wh-small + $gap-small});
    }
  }
}
.t-switch[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  &:active .circle {
    transform: scaleX(100%);
  }
  &:focus {
    outline: none;
  }
}
</style>
